<template>
  <div>
    <div class="text-h6 tw-m-5" style="padding-left: 3px;border-left: 5px solid #3370FF;">
      批量导入
    </div>
    <div class="tw-grid tw-grid-cols-3 tw-m-5">
      <div>
        <q-select outlined
                  v-model="role"
                  :options="role_list"
                  label="角色"
                  dense>
        </q-select>
      </div>
    </div>
    <div v-if="role==='学生'" class="q-pa-md">
      <q-table
        title="学生模板样例 "
        :rows="Studentrows"
        :columns="columns"
        color="primary"
        row-key="name"
        flat
        class="tw-border "
      >
        <template v-slot:top-right>
          <q-btn
            color="primary"
            icon-right="archive"
            flat
            label="下载CSV样例文件"
            no-caps
            @click="exportTable"
          />
        </template>
      </q-table>
    </div>
    <div v-else class="q-pa-md">
      <q-table
        title="教师模板样例 "
        :rows="Teacherrows"
        :columns="TeacherColumns"
        color="primary"
        row-key="name"
        flat
        class="tw-border "
      >
        <template v-slot:top-right>
          <q-btn
            color="primary"
            icon-right="archive"
            flat
            label="下载CSV样例文件"
            no-caps
            @click="exportTable"
          />
        </template>
      </q-table>
    </div>
  </div>
  <q-separator class="tw-m-5" />
  <div class="text-h6 tw-m-5" style="padding-left: 3px;border-left: 5px solid #3370FF;">
    上传文件
  </div>
  <div class="tw-m-5">
    <q-uploader field-name="file" url="http://localhost:8085/job/student/uploadcsv"/>
  </div>



</template>

<script setup>
import {ref} from "vue";

let role = ref('学生')
let role_list = ref(['学生', '老师'])
import {exportFile, useQuasar} from 'quasar'

const columns = [
  {
    name: 'sname',
    required: true,
    label: 'sname',
    align: 'center',
    field: 'sname',
  },
  {name: 'age', align: 'center', label: 'age', field: 'age'},
  {name: 'dept',align: 'center', label: 'dept', field: 'dept'},
  {name: 'major',align: 'center', label: 'major', field: 'major'},
  {name: 'class',align: 'center', label: 'classnum', field: 'class'},
  {name: 'sno',align: 'center', label: 'snum', field: 'sno'},
  {name: 'phone',align: 'center', label: 'tel', field: 'phone'},
  {name: 'email',align: 'center', label: 'email', field: 'email'},
  {name: 'password',align: 'center', label: 'password', field: 'password'},
  {name:'qq',align: 'center', label: 'qq', field: 'qq'},
]
const TeacherColumns = [
  {
    name: 'tname',
    required: true,
    label: 'tname',
    align: 'center',
    field: 'tname',
  },
  {name: 'age', align: 'center', label: 'age', field: 'age'},
  {name: 'dept',align: 'center', label: 'dept', field: 'dept'},
  {name: 'tnum',align: 'center', label: 'tnum', field: 'tnum'},
  {name: 'tel',align: 'center', label: 'tel', field: 'tel'},
  {name: 'email',align: 'center', label: 'email', field: 'email'},
  {name: 'password',align: 'center', label: 'password', field: 'password'},
  {name:'qq',align: 'center', label: 'qq', field: 'qq'},
  {name:'title',align: 'center', label: 'title', field: 'title'},
  {name:'role',align: 'center', label: 'role', field: 'role'},
  {name:'office',align: 'center', label: 'office', field: 'office'},
  {name:'project_num',align: 'center', label: 'project_num', field: 'project_num'},

]

const Studentrows = ref([
  {sname:'姓名',age:'年龄',dept:'院系',major:'专业',class:'班级',sno:'学号',phone:'电话',email:'邮箱',password:'密码',qq:'qq'},
])
const Teacherrows = ref([
  {tname:'姓名',age:'年龄',dept:'院系',tnum:'工号',tel:'电话',email:'邮箱',password:'密码',qq:'qq',title:'职称',role:'s:管理员，teacher:出题老师',office:'办公室',project_num:'项目数'},
])


function wrapCsvValue(val, formatFn, row) {
  let formatted = formatFn !== void 0
    ? formatFn(val, row)
    : val

  formatted = formatted === void 0 || formatted === null
    ? ''
    : String(formatted)

  formatted = formatted.split('"').join('""')
  /**
   * Excel accepts \n and \r in strings, but some other CSV parsers do not
   * Uncomment the next two lines to escape new lines
   */
  // .split('\n').join('\\n')
  // .split('\r').join('\\r')

  return `"${formatted}"`
}

const $q = useQuasar()


function  exportTable()
{
  // naive encoding to csv format
  const content = [columns.map(col => wrapCsvValue(col.label))].concat(
    rows.map(row => columns.map(col => wrapCsvValue(
      typeof col.field === 'function'
        ? col.field(row)
        : row[col.field === void 0 ? col.name : col.field],
      col.format,
      row
    )).join(','))
  ).join('\r\n')

  const status = exportFile(
    'table-export.csv',
    content,
    'text/csv'
  )

  if (status !== true) {
    $q.notify({
      message: 'Browser denied file download...',
      color: 'negative',
      icon: 'warning'
    })
  }
}
</script>

<style scoped>

</style>
